<template>
    <div class="user-warp item-warp">
        <div class="item-title">
            <h2>用户分析</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_user.png">
            </a>
        </div>
        <div class="user-content">
            <div class="user-item">
                <echarts-line :data="lineData" v-if="lineData.lineY.length>0"></echarts-line>
            </div>
            <div class="user-item">
                <div class="right-item">
                    <div class="pie">
                        <echarts-pie :percent="company.org" :name="company.name" :color="company.color"></echarts-pie>
                    </div>
                    <div class="pie">
                        <echarts-pie :percent="personal.user" :name="personal.name" :color="personal.color"></echarts-pie>
                    </div>
                </div>
                <div class="right-item">
                    <echarts-line :data="lineOrgData" v-if="lineOrgData.lineY.length>0"></echarts-line>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import EchartsLine from '@/components/Echarts/EchartsLine';
    import EchartsPie from '@/components/Echarts/EchartsPie/pieIndex';
    import {getUserData, getOrgData} from "@/api/apiList";
    export default {
        name: "userAnalysis",
        components: {EchartsLine, EchartsPie},
        data: () => ({
            userData: [],
            orgData: [],
            lineData: { // 折线图左边
                lineX: [],
                lineY: [],
                position: [30, 40, 30, 50],
                title: '用户注册趋势'
            },
            lineOrgData: { // 折线图右边
              lineX: [],
              lineY: [],
              position: [30, 40, 30, 50],
              title: '企业认证趋势'
            },
            company: {
              org: 0,
              name: '企业用户',
              color: '#00D98B'
            },
            personal: {
              user: 0,
              name: '个人用户',
              color: '#ECA961'
            }
        }),
        methods: {
            /**
             * 用户分析数据
             */
            getUserData() {
                getUserData({}).then(res => {
                    console.log('用户分析数据', res);
                    this.userData = res.data.data;
                    this.userData.map(item => {
                        this.lineData.lineX.push(item.creatDate);
                        this.lineData.lineY.push(item.num);
                    });
                });
            },

            /**
             * 用户分析数据右侧数据
             */
            getOrgData(){
              getOrgData({}).then( res => {
                this.company.org = res.data.data.org;
                this.personal.user = res.data.data.user;
                this.orgData = res.data.dataLine;
                this.orgData.map(item => {
                  this.lineOrgData.lineX.push(item.dateTime);
                  this.lineOrgData.lineY.push(item.countNum);
                });
              });
            }
        },
        created() {
            this.getUserData();
            this.getOrgData();
        }
    }
</script>

<style scoped type="text/less" lang="less">
    .user-warp {
        margin-top: 14px;
        height: 27vh;
        background-image: url("../../assets/img/bg/bg_k03.png");
        background-size: 100% 100%;
        .user-content {
            display: flex;
            .user-item {
                width: 50%;
                height: 24vh;
                .right-item {
                    position: relative;
                    z-index: 10;
                    display: flex;
                    width: 100%;
                    height: 8vh;
                    &:last-child {
                        height: 17vh;
                    }
                    &:first-child {
                        padding: 0 5%;
                    }
                    .pie {
                        position: relative;
                        z-index: 11;
                        top: -25px;
                        width: 50%;
                        height: 10vh;
                    }
                }
            }
        }
    }
</style>
